<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.4);
            /*固定定位以视口（html窗口）为参照物
            紧贴四个边，实现撑满全屏的效果
             */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consectetur impedit, libero odit possimus
        quam saepe? Aspernatur ea eligendi eos ipsam numquam praesentium quibusdam! Aspernatur culpa dolor doloribus
        veritatis voluptate.
    </div>
    <div>Dolores, hic illo. Adipisci aliquid animi aspernatur aut consectetur deleniti dolore dolorem doloremque ducimus
        eius eum eveniet facilis ipsam labore modi nemo quaerat, quidem, reiciendis saepe temporibus, velit voluptate
        voluptatum.
    </div>
    <div>Aperiam autem beatae dolor ducimus est iste numquam pariatur sed? Aliquid aspernatur delectus ex ipsum numquam
        praesentium recusandae reprehenderit saepe. Assumenda in possimus quaerat quibusdam? At magni ut vero voluptate!
    </div>
    <div>Ad, aliquam animi assumenda, culpa dolor dolore eius enim eos hic illo ipsa maiores maxime mollitia officia
        provident recusandae rem, voluptas voluptate. A accusamus autem eaque labore mollitia optio quaerat!
    </div>
    <div>Ab accusamus alias at dolores excepturi ipsa labore, quaerat quisquam sint sit. Accusamus corporis delectus,
        dolorem, est eum ex fugiat fugit libero mollitia, nesciunt quae quod quos rem repellat vitae.
    </div>
    <div>Atque corporis distinctio excepturi facere fugiat nesciunt odit quam repellendus reprehenderit unde. Culpa cum
        harum neque non odio quia unde velit? Id in modi neque odio quaerat repudiandae sequi ullam.
    </div>
    <div>Ad, consectetur debitis delectus deserunt dicta dolore doloribus dolorum eum exercitationem hic laborum nostrum
        provident repellat sed tempore tenetur ut! Ab culpa cumque maiores numquam odit provident quo soluta veniam?
    </div>
    <div>Alias aliquam architecto autem, beatae, consectetur dicta distinctio dolore ducimus earum eos hic id labore
        laboriosam laborum maxime minima necessitatibus neque nobis nulla obcaecati perferendis porro possimus quos sed
        suscipit?
    </div>
    <div>At, aut consequuntur debitis deleniti distinctio, dolores est laudantium minima natus nesciunt nobis non
        numquam placeat possimus quam quia recusandae temporibus veritatis vero vitae! Assumenda consequatur optio
        recusandae rem reprehenderit.
    </div>
    <div>Amet deleniti distinctio et minima officiis porro, recusandae? Dicta, quidem, rem? Aliquid eius magnam magni
        maiores voluptas. Assumenda deleniti dolor, dolore esse id numquam, optio perspiciatis provident repellat ut
        vero.
    </div>
    <div>Adipisci aliquam aperiam autem beatae earum, est exercitationem facilis fugit harum illo ipsa minima modi
        necessitatibus nulla porro praesentium qui quidem quo reiciendis repudiandae sint suscipit tempora veniam
        voluptatem voluptatum?
    </div>
    <div>Amet asperiores maiores sunt totam veniam! Alias aspernatur cupiditate eius eos facilis, ipsa labore laboriosam
        libero perspiciatis reiciendis sunt tenetur. Aliquid beatae blanditiis earum illo illum praesentium reiciendis,
        sint tempora.
    </div>
    <div>Eligendi enim iusto nihil. A accusamus accusantium deleniti distinctio ea eligendi excepturi fuga harum impedit
        iste minima, optio quis similique. Consequatur modi optio quod saepe suscipit? Hic iusto optio quas.
    </div>
    <div>A ad architecto, dolores, eligendi eum itaque, iure laborum necessitatibus obcaecati placeat tempora
        voluptatibus. Debitis facere impedit modi officia quia rerum? Ad, harum, magnam! Deleniti dolorem facere minus
        placeat? Voluptatem?
    </div>
    <div>Amet aperiam aspernatur, corporis distinctio eaque est in incidunt nam optio saepe! A accusantium aliquid at
        distinctio, fuga incidunt nesciunt odit possimus quam quas quidem sed temporibus unde veritatis vero.
    </div>
    <div>Culpa cum, distinctio eligendi libero neque nisi officiis repellendus, reprehenderit sunt voluptate voluptates
        voluptatum. Alias architecto corporis distinctio hic. Blanditiis exercitationem perspiciatis praesentium quidem
        repellendus! Adipisci aliquam et nemo quaerat?
    </div>
    <div>Alias amet dignissimos illum placeat quaerat quibusdam, quis quos sed unde. Ab animi at consequuntur dicta,
        dolorem, harum inventore maiores officiis praesentium quidem, recusandae soluta. Aperiam ex hic laborum
        reiciendis.
    </div>
    <div>Debitis eligendi et explicabo fugiat impedit labore odit quibusdam sint soluta. Aperiam asperiores corporis
        debitis eum fuga ipsum iusto labore nam nihil non porro, quae quasi quisquam tempore unde veniam.
    </div>
    <div>Accusantium, beatae cum dolores facilis in magnam natus officia provident saepe vero! Ad aperiam, aut delectus
        dolores ducimus id laboriosam non officiis pariatur quia quos sapiente sint soluta ullam veniam?
    </div>
    <div>Consequuntur corporis cumque distinctio eaque, earum nulla odit officiis omnis optio perspiciatis praesentium
        quae qui ut? Accusamus, adipisci alias at eius fugit iure, laborum necessitatibus perferendis porro quibusdam
        rerum ullam.
    </div>
    <div>Accusantium adipisci alias, aliquam aspernatur autem consequuntur debitis dicta dolore est explicabo id ipsam
        ipsum laborum maxime minima pariatur perspiciatis quaerat quas, quisquam quo quos repudiandae sapiente similique
        voluptatem voluptatibus!
    </div>
    <div>Accusamus assumenda, commodi debitis deleniti dolorem, eaque enim error ex facere fugiat ipsum magnam maiores
        nam necessitatibus numquam possimus praesentium quaerat quas quisquam, repudiandae tempore velit voluptatibus.
        Aperiam impedit, voluptatibus!
    </div>
    <div>Assumenda at commodi delectus deserunt dolores, eveniet excepturi fugiat ipsam laboriosam minus molestiae
        mollitia nostrum recusandae repudiandae rerum sint veniam. Ducimus hic iusto officia, officiis rem sit vero!
        Harum, repudiandae?
    </div>
    <div>Accusamus assumenda beatae consectetur distinctio expedita, id, impedit ipsa necessitatibus nihil rerum
        similique, ut voluptates. Debitis fugiat laudantium nisi porro quo ratione sed sunt veniam. Adipisci labore
        repellendus sit vitae.
    </div>
    <div>Adipisci corporis eius hic minus mollitia nisi obcaecati quam quod rem. Consequatur eveniet excepturi explicabo
        hic laudantium quod tempore, voluptates! Dicta error maiores natus necessitatibus nihil nostrum saepe soluta
        voluptatem.
    </div>
    <div>Ab, aperiam ducimus eligendi error, illo in itaque, nobis nulla optio quisquam tempore tenetur vero voluptates.
        Atque consectetur deserunt id natus optio tempore totam. Ipsam iste minima rerum sequi sit.
    </div>
    <div>Accusamus alias architecto consectetur dolor dolores eum eveniet excepturi hic ipsam iste iure iusto nam neque
        nisi nulla omnis porro quam quas quasi quod sint temporibus veniam, voluptate! At, nam?
    </div>
    <div>Accusamus explicabo facilis minus officiis provident quae quidem unde. Aliquam cumque deserunt enim eos facere
        id laborum magni maiores nihil, nulla porro repellat, repudiandae similique vero, voluptatum? Consectetur est,
        molestiae.
    </div>
    <div>Ad asperiores aspernatur fugit, id nam officiis pariatur praesentium, quae repellendus sint totam, ullam unde
        vitae. Ad amet at aut ea, exercitationem fugit ipsa iure laudantium neque quia ratione repellendus.
    </div>
    <div>A accusantium architecto autem debitis delectus deserunt dolorem doloribus fugit iusto labore maiores non odio
        officia, provident quia quibusdam sed, sint sunt! Aliquid culpa est exercitationem minus molestiae natus quos?
    </div>
    <div>Ducimus in optio perspiciatis provident quaerat? Ad beatae cumque dicta distinctio earum eligendi, iusto labore
        modi natus nihil qui quibusdam, quos recusandae reprehenderit repudiandae, tenetur vel? Aperiam distinctio fugit
        in.
    </div>
    <div>Asperiores consequatur ducimus ipsa nihil quas quod ratione ullam vel! Architecto blanditiis consectetur culpa
        debitis deleniti dignissimos, eius eos explicabo facere magni natus obcaecati quas qui reiciendis repellat sit
        vel.
    </div>
    <div>Amet aperiam atque commodi cum deleniti dolorum est, facilis id iste iure iusto labore, libero maxime nemo
        numquam obcaecati odio possimus praesentium quas quibusdam rerum sed suscipit veniam, voluptate voluptatum.
    </div>
    <div>Architecto atque cum dicta distinctio ducimus, eius ipsum iure iusto molestiae natus non pariatur quos, vitae.
        Architecto doloribus eos ex fugiat in inventore sint vel! Optio quia repellendus sequi voluptate!
    </div>
    <div>Possimus, sunt, voluptate. Adipisci alias corporis debitis eaque exercitationem harum ipsa ipsum itaque magnam
        maiores minima nobis nulla, porro possimus quasi, quis quisquam repellat rerum sed totam unde, voluptas
        voluptatum.
    </div>
    <div>A adipisci aliquid aut beatae commodi cum debitis dicta dolore dolorum eius eos eveniet, excepturi
        exercitationem facere iure minus nesciunt nisi officia officiis quaerat recusandae, sint sit tenetur vel
        veritatis.
    </div>
    <div>Accusamus asperiores aspernatur nulla similique. Ab adipisci aliquam aperiam architecto consequuntur corporis
        cupiditate, delectus doloremque ea eos eveniet illo inventore molestiae neque, quas quidem rem reprehenderit
        similique suscipit vel. Nam!
    </div>
    <div>Accusantium ad alias assumenda at deleniti dicta ducimus enim esse illum in iste laudantium, maiores minima,
        neque non nulla perspiciatis porro quasi quod rem sapiente sit soluta suscipit vel veniam?
    </div>
    <div>Ad architecto aut, commodi consectetur dignissimos doloribus eius error ex explicabo harum illo illum inventore
        ipsam itaque iure libero nam necessitatibus nobis porro praesentium quia reprehenderit suscipit veniam vero
        voluptate.
    </div>
    <div>Autem consequatur corporis dicta ea illo incidunt itaque possimus quaerat quidem quo soluta, temporibus
        voluptatibus! Accusamus dicta, eaque error exercitationem fugiat iste, non praesentium quo, sed tempore
        temporibus veritatis vitae!
    </div>
    <div>Aliquid autem consequatur corporis debitis earum exercitationem explicabo harum illum incidunt natus non nulla
        quam similique sit tempora, tempore unde vel vitae voluptas voluptate. Eum officia optio perspiciatis placeat
        rem.
    </div>
    <div>Debitis dolore eos excepturi hic id inventore, iste libero neque porro, quod repellendus, unde velit. Ab dolore
        eos nostrum optio, quia recusandae rerum unde? Blanditiis consequuntur delectus explicabo similique ut?
    </div>
    <div>Architecto asperiores deserunt eligendi inventore similique suscipit vel voluptates. Ad atque cum deserunt
        doloremque eius esse, facere incidunt, ipsam labore laborum natus, necessitatibus nemo nesciunt nihil nostrum
        numquam quaerat sunt?
    </div>
    <div>Earum explicabo facilis id itaque, iusto quis quo rerum soluta? Aspernatur at cumque dignissimos dolor dolores
        explicabo, harum magnam magni officia porro possimus quam quas qui quis reprehenderit ullam voluptatibus.
    </div>
    <div>A corporis culpa cumque dolor error ex facere illo incidunt ipsam iure libero magni modi neque, nesciunt nobis
        pariatur quas quo quos repudiandae saepe sunt totam ullam vitae voluptatem voluptates.
    </div>
    <div>Alias cumque dolore esse et illum laborum maxime minima molestiae necessitatibus, numquam quasi quisquam
        repellat reprehenderit sed similique ullam voluptatem! Culpa eaque facere itaque maiores natus non perferendis
        veritatis voluptates!
    </div>
    <div>Accusamus accusantium consequatur corporis cum deleniti dolor doloremque fugiat illo minima modi, natus,
        quaerat tempora temporibus tenetur voluptatibus? Ad corporis dicta doloremque, error incidunt magni modi nemo
        quae veniam voluptatem.
    </div>
    <div>Architecto asperiores nisi nobis non officiis praesentium quis rem similique soluta vero. Cum facere nam odit
        sint voluptates. Cupiditate dignissimos dolores iure officiis provident quod repellendus suscipit temporibus,
        ullam vero!
    </div>
    <div>Dolor dolore sunt suscipit? Blanditiis culpa dolorum fuga saepe voluptatum? Cum eveniet itaque unde voluptatem!
        Aspernatur fugiat praesentium ut. A ab asperiores commodi debitis distinctio, eveniet in ipsam quo reiciendis?
    </div>
    <div>Cupiditate deserunt ea facere, iusto necessitatibus nulla obcaecati optio, quam quia recusandae rerum totam
        voluptas. Alias dicta, enim et incidunt ipsum labore maiores mollitia odit officiis quisquam ratione suscipit
        tempore.
    </div>
</div>
</body>
</html>